<template>
	<div class="login">
		<div class="body">
		
		<div class="container">
		<h2>用户登录</h2>
		<el-form label-width="auto" :model="ruleForm" ref="loginForm" :rules="rules" >
			<el-form-item label="账号" prop="email">
			<el-input v-model="ruleForm.email" />
			</el-form-item>
			<el-form-item label="密码" prop="password">
			<el-input type="password" v-model="ruleForm.password" />
			</el-form-item>
			<el-button size="large" type="primary" @click="submitForm(loginForm)" >登录</el-button>
		</el-form>
				
		</div>
		</div>
	</div>
</template>

<script setup>
	import { reactive,ref,toRefs } from 'vue'
	import { useStore} from 'vuex'
	const store = useStore()//初始化 创建对象
	//import type { FormItemProps, FormProps } from 'element-plus'
	const loginForm = ref()
	const state = reactive({
		ruleForm:{
			email: "ant@163.com",
			password: "ant123",
		}
	})
	
	const rules = reactive({
	email: [
	{ required: true, message: '请输入账号！', trigger: 'blur' },
	],
	password: [
	{ required: true, message: '请输入密码！', trigger: 'blur' },
	{ min: 3, max: 25, message: '密码长度为 3 to 25', trigger: 'blur' },
	],
	})
	
	const submitForm = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			//验证通过进行登录
			store.dispatch("authModule/userLoginAction",state.ruleForm)
			console.log('submit!')
		} else {
		console.log('error submit!', fields)
		}
	})
	}
	
	const {ruleForm} = toRefs(state)
</script>

<style scoped>
	.login{
		background: url("../../assets/bg.jpg");
		height:100%;
		width:100%;
		position: fixed;
		background-size: cover;
	}
	.body{
		display:flex;
		justify-content: center; /* 定义了项目在主轴上的对齐方式 */
		align-items: center; /* 定义项目在交叉轴上如何对齐 */
		margin-top: 20%; 
	}
	.container{
		display:flex;
		justify-content: center; /* 定义了项目在主轴上的对齐方式 */
		align-items: center; /* 定义项目在交叉轴上如何对齐 */
		flex-direction: column; /* 决定主轴的方向（即项目的排列方向） */
		width:420px;
		height: 300px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 21px 41px 0 rgba(0,0,0,0.2);
	
	}
</style>